<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            text-align: center;
        }
        svg{
           background: #aaa;
        }
    </style>
</head>
<body>
    <svg width="500" height="400">
        <rect x="235" y="100" width="300" height="300" fill="#faa" stroke="#800" fill-opacity="0.3" stroke-opacity="0.3" id="rect" x`  ></rect>
    </svg>
    <script>
        /**
         * 效果：鼠标移入，透明度由0.3到1 ；鼠标移出透明度还原为0.3
         */
        rect.onmouseover=function () {
            rect.setAttribute('fill-opacity',1);
            rect.setAttribute('stroke-opacity',1);
        }
        rect.onmouseleave=function () {
            rect.setAttribute('fill-opacity',0.3);
            rect.setAttribute('stroke-opacity',0.3);
        }
    </script>
</body>
</html>